<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../ohter/js库/mock.js"></script>
    <script src="../../ohter/js库/vue.js"></script>
    <title>css常见布局技巧</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 
        margin负值的运用
            边框重叠
        文字围绕浮动元素 
            浮动元素不会压到文字
        行内块的巧妙运用
        css三角强化
        */
        ul {
            list-style: none;
        }

        .a1 {
            background-color: pink;

        }

        .a2 {
            background-color: green;

        }

        .a3 {
            background-color: blue;
        }

        li {
            width: 300px;
            height: 300px;
            float: left;
            border: 2px solid black;
            margin-left: -2px;
            position: relative;
            top: 0;
            left: 0;
        }

        li:hover {
            border-color: orange;
            /* 相对定位会压在标准流 */

            z-index: 2;

            top: 0;
            left: 0;
        }

        .fudo {
            width: 200px;
            height: 100px;
            background-color: gold;
            /* padding-left: 20px; */
        }

        .fudo img {
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }
        div.page a {
            text-decoration: none;
            display: inline-block;
            /* width: 20px; */
            height: 20px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            line-height: 20px;
            text-align: center;
            padding: 5px;
        }
        div.page {
            text-align: center;
        }
        div.page input {
            width: 30px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="page">
            <a href="#">&lt;&lt;上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">&gt;&gt;下一页</a><span>共10页</span> 到第<input type="number">页<button>确定</button>
        </div>
     
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word: Mock.mock('@cowrd(20)')
            }
        },
    })
</script>

</html>